<template>
  <ul class="prolist">
    <li class="proitem" v-for="item of prolist" :key = "item.proid">
      <div class="itemimg">
        <img :src="item.proimg" alt="">
      </div>
      <div class="iteminfo">
        <h3>{{ item.proname }}</h3>
        <div class="desc"> {{ item.desc }}</div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    prolist: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.prolist {
  .proitem {
    @include rect(100%, 2rem);
    // 实现真正的1px的下边框 - 1个物理像素
    // 面试高频问题 css像素  物理像素 屏幕分辨率
    @include border(0 0 1px 0, #ccc, solid);
    @include flexbox();
    @include box-sizing(border-box);
    .itemimg {
      @include rect(2.1rem, 2.1rem);
      img {
        @include rect(1.9rem, 1.9rem);     
        @include display(block);
        @include border(1px, #ccc, solid);
        @include margin(0.05rem);
        @include box-sizing(border-box);
      }
    }
    .iteminfo {
      @include flex();
      @include padding(0.1rem 0.1rem);
      .desc {
        @include ellipsis(100%, 1);
      };
    }
  }
}
</style>